<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="css/Admin_Search.css">

</head>
<body>

<div class="page-header">
    <h1>欢迎进入管理员查询系统</h1>
</div>



<div class="menu-container">
    <ul class="nav_nav-pills">
        <li role="人员展示"><a href="Administrators_users_updateBan.html">人员展示</a></li>
        <li role="服务查询"><a href="Administrators_Base.html">返回主页</a></li>
    </ul>
</div>

<div class="Search">

    <div class="input-group_input-group-lg">
        <ul class="elem">

            <span>全部人员信息</span>
            <p>
                <span>用户电话号码</span>
                <input type="text"  class="form-control" id="phoneNumber" placeholder="请输入用户的电话号码" aria-describedby="sizing-addon1" >
                <button onclick="updateBan()" type="button" class="form-control_button">解除封禁</button>


        </ul>
    </div>


</div>



<div id="userDetails" class="user-details"></div>

<div id="workersList"></div>

<script src="jquery-1.12.4.min.js"></script>
<script src="bootstrap.js"></script>
<script>



    function updateBan() {
        var phoneNumber = document.getElementById("phoneNumber").value;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/updateBan?phoneNumber=" + phoneNumber , true);
        alert("修改成功");
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var updateUser = JSON.parse(xhr.responseText);
                alert(xhr.responseText);
            }
        };
        xhr.send();
    }




    function displayAllBannedUser() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/AllBannedUser", true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    alert(xhr.responseText);
                    var users = JSON.parse(xhr.responseText);
                    displayBannedUserList(users);
                } else {

                    alert("Failed to fetch workers.");

                }
            }
        };
        xhr.send();
    }

    function displayBannedUserList(users) {
        var workersListDiv = document.getElementById("workersList");
        var html = "<table class='workers-table'>";
        // 表头
        html += "<tr>";
        html += "<th>电话号码</th>";
        html += "<th>姓名</th>";
        html += "<th>性别</th>";
        html += "<th>卡号</th>";
        html += "<th>封禁状态</th>";
        html += "</tr>";

        // 遍历每个工作人员并添加到表格中
        users.forEach(function(users) {
            html += "<tr>";
            html += "<td>" + users.phoneNumber + "</td>";
            html += "<td>" + users.userName + "</td>";
            html += "<td>" + users.gender + "</td>";
            html += "<td>" + users.idCardNumber + "</td>";
            html += "<td>" + users.banStatus + "</td>";
            html += "</tr>";
        });

        html += "</table>";
        workersListDiv.innerHTML = html;
    }

    // 在页面加载完成后调用 displayAllWorkers 函数来获取并展示全部的 worker 列表
    window.onload = function() {
        displayAllBannedUser();
    };
</script>
</body>
</html>